<template>
    <div class="global-header duration-300 ease-in-out transition-all h-full flex-y-center">
        <global-logo></global-logo>

        <div class="header-menu flex-1-hidden flex-y-center">
            <header-menu></header-menu>
        </div>

        <div class="flex justify-end h-full flex-y-center">
            <user-avatar></user-avatar>
        </div>
    </div>
    <!-- <div class>怎么说，这就是导航栏</div> -->
</template>

<script lang="ts" setup>
// import DarkModeContainer from '@/components/BasicComponents/DarkModeContainer.vue';
import { GlobalLogo, HeaderMenu, UserAvatar } from './components/index';

// interface Props {
//     /** 是否显示logo */
//     showLogo: GlobalHeaderProps["showLogo"];
//     /** 显示头部菜单 */
//     showHeaderMenu: GlobalHeaderProps["showHeaderMenu"];
//     /** 显示菜单 */
//     showMenuCollape: GlobalHeaderProps["showMenuCollape"];
// }
// defineProps<Props>();
</script>

<style scoped>
.global-header {
    box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
}
</style>